<template>
  <div class="orderCont" :style="'min-height: ' + docheight + 'px'">
    <div v-if="!showTimeOut && showCont">
      <div class="orderHead">
        <serch-com
          placher="请输入技师名称"
          @serchClick="serchFn"
          color="#4fc763"
        ></serch-com>
      </div>
      <div class="techArr" v-if="techArr.length > 0">
        <div class="orderItem" :key="index" v-for="(item, index) in techArr">
          <div class="goodsList">
            <div class="goodsItem">
              <div class="goodsImg">
                <img
                  @click="lookHead(item)"
                  :src="item.technician_head_img + ossSrc"
                />
                <div class="ageMask" v-if="item.technician_sex == 1">
                  <span class="iconfont icon-xingbie-nan"></span>
                  <span>{{ item.age }}</span>
                </div>
                <div class="ageMaskGirl" v-if="item.technician_sex == 2">
                  <span class="iconfont icon-xingbie-nv"></span>
                  <span>{{ item.age }}</span>
                </div>
              </div>
              <div class="goodsInfo">
                <div class="goodsName">
                  <div class="newTag" v-if="item.is_new">新人</div>
                  <div class="goodsNameVal">
                    {{ item.technician_nick_name }}
                  </div>
                </div>
                <div class="orderTime">
                  <div class="newTag" v-if="item.service_status == 1">
                    可服务
                  </div>
                  <div class="serveing" v-if="item.service_status == 2">
                    服务中
                  </div>
                  <div class="blackTag" v-if="item.service_status == 3">
                    休息中
                  </div>
                  <div class="iconfont icon-shoucang2"></div>
                  <div>{{ item.rate }}</div>
                  <div class="orderNum">已服务:{{ item.order_num }}单</div>
                </div>
                <div class="goodsType">
                  <div class="goodsTypeItem">
                    {{ item.technician_introduce }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="underCont">
            <div class="lifeCont">
              <img
                :src="item2"
                v-if="index2 < 3"
                @click="showImg(item.life_photos, index2)"
                v-for="(item2, index2) in item.life_photos"
                :key="index2"
              />
            </div>
            <div class="goodsCtrl">
              <div class="shopInfo">
                <div class="shopInfoItem">
                  <div class="iconfont icon-w_aixin"></div>
                  <div>{{ item.collect_num }}</div>
                </div>
              </div>
              <div
                @click="saveFn(item)"
                v-if="item.is_collect == 2"
                class="orderBtn greenBtn"
              >
                收藏技师
              </div>
              <div
                @click="cancelSaveFn(item)"
                v-if="item.is_collect == 1"
                class="orderBtn greenBtn"
              >
                取消收藏
              </div>
              <div
                @click="getPack(item)"
                v-if="item.service_status == 1"
                class="orderBtn greenBtn"
              >
                立即预约
              </div>
            </div>
          </div>
          <div
            class="serveTime"
            v-if="item.service_status == 1 && item.rest_time"
          >
            休息时间：{{ item.rest_time }}
          </div>
        </div>
      </div>
      <div class="loadMore" v-if="techArr.length > 0">{{ loadMoreText }}</div>
      <nodata v-if="techArr.length == 0" text="暂无技师信息~"></nodata>
      <van-popup v-model:show="showCheck" round position="bottom">
        <div class="techMask">
          <div class="goodsItem">
            <div class="goodsImg">
              <img :src="showMaskItem.technician_head_img + ossSrc" />
            </div>
            <div class="goodsInfo">
              <div class="goodsName">
                <div>{{ showMaskItem.technician_nick_name }}</div>
                <div class="iconfont icon-shoucang2"></div>
                <div class="rateNum">{{ showMaskItem.rate }}分</div>
              </div>
              <div class="goodsTip">
                {{ showMaskItem.technician_introduce }}
              </div>
              <div class="regTag">
                <div class="regTagItem">
                  <div class="iconfont icon-shimingrenzheng1"></div>
                  <div>实名认证</div>
                </div>
                <div class="regTagItem">
                  <div class="iconfont icon-peifu"></div>
                  <div>爽约包赔</div>
                </div>
              </div>
            </div>
          </div>
          <div class="maskTitle">可选择服务项目</div>
          <div class="noTech" v-if="packArr.length == 0">
            该技师暂无绑定套餐，请换个技师试试～
          </div>
          <div class="goodsList" v-if="packArr.length > 0">
            <div
              @click="maskGoodFn(item, index)"
              :class="
                item.package_id == checkGoodsId
                  ? 'acticeGoods listItem'
                  : 'listItem'
              "
              :key="index"
              v-for="(item, index) in packArr"
            >
              <div class="itemImg">
                <img :src="item.package_cover + ossSrc" />
                <div class="typeTagWai">
                  <div class="typeTag">热销</div>
                </div>
              </div>
              <div class="itemInfo">
                <div class="itemName">
                  <span>{{ item.package_name }}</span>
                </div>
                <div class="itemDes">
                  {{ item.package_effect }}
                </div>
                <div class="priceVal">
                  <span class="price"
                    >活动价：￥<span style="font-size:0.9rem">{{
                      item.package_price
                    }}</span></span
                  >
                  <span class="oldPrice"
                    >¥{{ item.package_original_price }}</span
                  >
                </div>
                <div class="itemTag">
                  <div class="tagDes">
                    <!-- <span class="iconfont icon-shijian"></span> -->
                    <span>{{ item.package_time }}分钟</span>
                  </div>
                  <div>
                    <span class="showNum">热销:{{ item.package_sale }}单</span>
                    <span class="showNum">好评:{{ item.package_score }}%</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <saveBtn
            color="#4fc763"
            :style="checkGoodsId == -1 ? 'opacity: 0.5;' : ''"
            :value="checkGoodsId == -1 ? '请选择套餐' : '立即预约'"
            @saveClick="orderFn"
          ></saveBtn>
        </div>
      </van-popup>
    </div>
    <footcpm></footcpm>
    <van-image-preview
      :startPosition="startPosition"
      v-model:show="showVantImg"
      :images="priveImg"
    ></van-image-preview>
    <toast
      v-model="showToast"
      position="middle"
      width="50%"
      type="text"
      :time="1000"
      >{{ showText }}</toast
    >
    <getLoad v-if="!showCont"></getLoad>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
    <sub-load v-if="showLoad"></sub-load>
  </div>
</template>

<script>
import nodata from "@/components/public/nodata";
import serchCom from "@/components/public/serchCom.vue";
import footcpm from "@/components/footcpm";

import { Technician, checkPackage, collect, canceCollect } from "@/http/api";
import { Toast } from "vux";
import getLoad from "@/components/public/getLoad";
import subLoad from "@/components/public/subLoad.vue";
import saveBtn from "@/components/public/saveBtn.vue";

import getTimeOut from "@/components/public/getTimeOut";
export default {
  components: {
    saveBtn,
    footcpm,
    subLoad,
    getLoad,
    getTimeOut,
    nodata,
    serchCom,
    Toast
  },
  data() {
    return {
      loadMoreText: "数据加载中~",
      showLoad: false,
      showTimeOut: false,
      showCont: false,
      showText: "",
      showToast: false,
      serchKey: "",
      per_page: 10,
      page: 1,
      techArr: [],
      packArr: [],
      // 分页
      getting: false,
      last_page: 0,
      // 弹窗
      showCheck: false,
      checkGoodsId: -1,
      showMaskItem: {},

      priveImg: [],
      showVantImg: false,
      startPosition: 0
    };
  },
  methods: {
    serchFn(val) {
      this.serchKey = val;
      this.page = 1;
      this.last_page = 0;
      this.techArr = [];
      this.getData();
    },
    lookHead(item) {
      let arr = [item.technician_head_img];
      this.showImg(arr, 0);
    },
    showImg(arr, index) {
      if (arr.length > 0) {
        this.startPosition = index;
        this.priveImg = arr;
        this.showVantImg = true;
      }
    },
    cancelSaveFn(item) {
      let data = {
        technician_id: item.technician_id
      };
      canceCollect(data)
        .then(res => {
          this.showToast = true;
          if (res.data.code == 1) {
            this.showText = "取消收藏成功";
            item.is_collect = 2;
            item.collect_num--;
          } else {
            this.showText = res.data.msg;
          }
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
    saveFn(item) {
      let data = {
        technician_id: item.technician_id
      };
      collect(data)
        .then(res => {
          this.showToast = true;
          if (res.data.code == 1) {
            this.showText = "收藏成功";
            item.is_collect = 1;
            item.collect_num++;
          } else {
            this.showText = res.data.msg;
          }
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
    orderFn() {
      if (this.checkGoodsId != -1) {
        this.$router.push({
          path: "/orderWait",
          query: {
            package_id: this.checkGoodsId,
            technician_id: this.showMaskItem.technician_id
          }
        });
      }
    },
    maskGoodFn(item, index) {
      this.checkGoodsId = item.package_id;
    },
    toDetail(item) {
      this.$router.push({ path: "/orderDetail", query: { id: item.order_id } });
    },
    getPack(item) {
      this.checkGoodsId = -1;
      this.showMaskItem = item;
      this.showCheck = true;
      let data = {
        package_id: item.package_id
      };
      checkPackage(data)
        .then(res => {
          if (res.data.code == 1) {
            this.packArr = res.data.data;
          } else {
            this.showToast = true;
            this.showText = "套餐获取失败";
          }
        })
        .catch(() => {
          this.showToast = true;
          this.showText = "网络请求超时";
        });
    },
    getData() {
      let data = {
        technician_nick_name: this.serchKey,
        per_page: this.per_page,
        page: this.page
      };
      Technician(data)
        .then(res => {
          if (res.data.code == 1) {
            let arr = res.data.data.data;
            for (let i = 0; i < arr.length; i++) {
              arr[i]["rate"] =
                (Number(arr[i].technician_score) / 20).toFixed(1) < 4.8
                  ? 4.8
                  : (Number(arr[i].technician_score) / 20).toFixed(1);
              this.techArr.push(arr[i]);
            }
            setTimeout(() => {
              this.getting = false;
            }, 100);
            this.last_page = res.data.data.last_page;
            if (this.page == this.last_page) {
              this.loadMoreText = "到底啦～";
            } else {
              this.loadMoreText = "数据加载中~";
            }
          } else {
            this.showToast = true;
            this.showText = "技师获取失败";
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showCont = true;
          this.showTimeOut = true;
        });
    },
    nextfn() {
      if (this.$route.path == "/tech") {
        let h =
          document.documentElement.scrollHeight || document.body.scrollHeight;
        let wh =
          document.documentElement.clientHeight || document.body.clientHeight;
        let top = document.documentElement.scrollTop || document.body.scrollTop;
        let bottom = h - wh - top;
        if (bottom <= 50) {
          if (this.getting == false) {
            if (this.last_page > this.page) {
              this.getting = true;
              this.page++;
              this.getData();
            }
          }
        }
      }
    }
  },
  mounted() {
    window.addEventListener("scroll", this.nextfn);
  },
  beforeRouteLeave(to, from, next) {
    from.meta.keepAlive = false;
    next();
  },
  created() {
    this.getData();
  }
};
</script>

<style scoped lang="less">
.orderCont {
  width: 100%;
  background-color: #f2f3f3;
  box-sizing: border-box;
  padding-bottom: 3.25rem;
  padding-top: 4rem;
  .orderHead {
    width: 100%;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;

    .orderTop {
      width: 100%;
      padding: 0 4%;
      box-sizing: border-box;
      background-color: #fff;
      .orderNav {
        width: 100%;
        display: flex;
        position: relative;
        justify-content: space-between;
        .navItem,
        .navItem_active {
          width: 20%;
          text-align: center;
          padding: 0.75rem;
          box-sizing: border-box;
          font-size: 0.75rem;
          color: #666;
          white-space: nowrap;
        }
        .navItem_active {
          color: #4fc763;
          border-bottom: 1px solid #4fc763;
        }
      }
    }
  }
  .techArr {
    width: 100%;
    padding: 0.25rem 4%;
    box-sizing: border-box;
    .orderItem {
      width: 100%;
      background-color: #fff;
      border-radius: 0.25rem;
      padding: 0.75rem 1rem;
      margin-bottom: 0.75rem;
      box-sizing: border-box;

      .goodsList {
        width: 100%;
        .goodsItem {
          width: 100%;
          margin-bottom: 0.5rem;
          display: flex;
          align-items: center;
          position: relative;
          overflow: hidden;

          .goodsImg {
            width: 4rem;
            height: 4rem;
            // overflow: hidden;
            margin-right: 0.5rem;
            position: relative;
            .ageMask,
            .ageMaskGirl {
              position: absolute;
              right: 0;
              bottom: -0.15rem;
              background-color: #5e81fd;
              padding: 0.15rem 0.5rem;
              font-size: 0.6rem;
              color: white;
              border-radius: 1rem;
              transform: scale(0.8);
              .iconfont {
                font-size: 0.6rem;
              }
            }
            .ageMaskGirl {
              background-color: #fb87c9;
            }
            img {
              width: 100%;
              border-radius: 50%;
            }
          }
          .goodsInfo {
            width: 0.5rem;
            flex: 1;
            display: flex;
            flex-direction: column;
            height: 4rem;
            justify-content: space-between;
            .goodsName {
              width: 100%;
              font-size: 0.7rem;
              display: flex;
              .goodsNameVal {
                flex: 1;
                width: 1rem;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .newTag {
                background-color: #4fc763;
                color: white;
                font-size: 0.6rem;
                padding: 0.05rem 0.5rem;
                border-radius: 0.1rem;
                margin-right: 0.5rem;
              }
            }
            .orderTime {
              font-size: 0.6rem;
              color: #666;
              display: flex;
              align-items: center;
              .newTag,
              .blackTag,
              .serveing {
                // background-color: #4fc763;
                border: 1px solid #4fc763;
                color: #4fc763;
                font-size: 0.6rem;
                padding: 0.05rem 0.5rem;
                border-radius: 0.1rem;
                margin-right: 0.5rem;
              }
              .blackTag {
                // background-color: #ebebeb;
                color: #666;
                border: 1px solid #666;
              }
              .serveing {
                color: #4fc763;
                border: 1px solid #4fc763;
              }
              .iconfont {
                color: #4fc763;
                margin-right: 0.25rem;
              }
              .orderNum {
                margin-left: 0.75rem;
              }
            }
            .goodsType {
              display: flex;
              align-items: center;
              justify-content: space-between;
              .goodsNumCont {
                display: flex;
                height: 1rem;
                line-height: 1rem;
                color: #999;
                font-size: 0.6rem;
                align-items: center;
              }
              .goodsTypeItem {
                padding: 0.1rem 0.5rem;
                background-color: #f6f6f6;
                font-size: 0.6rem;
                height: 1rem;
                line-height: 1rem;
                border-radius: 0.15rem;
                color: #999;
              }
            }
            .goodsInfoPrice {
              color: #999;
              font-size: 0.6rem;
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
          }
        }
      }
      .orderSumCont {
        font-size: 0.6rem;
        text-align: right;
        color: #333;
        .priceVal {
          position: relative;
          top: 0.1rem;
          color: #4fc763;
        }
      }
      .orderTip {
        font-size: 0.6rem;
        color: #999;
        text-align: right;
        margin-top: 0.5rem;
      }
      .underCont {
        width: 100%;
        align-items: center;
        margin-top: 0.75rem;
        display: flex;
        .lifeCont {
          width: 4rem;
          display: flex;
          align-items: center;
          img {
            width: 30%;
            margin-right: 2%;
            border-radius: 0.15rem;
          }
        }
        .goodsCtrl {
          width: 1rem;
          flex: 1;
          display: flex;
          align-items: center;
          margin-left: 0.5rem;
          justify-content: space-between;
          box-sizing: border-box;
          .shopInfo {
            flex: 1;
            display: flex;
            align-items: center;
            .shopInfoItem {
              display: flex;
              color: #4fc763;
              align-items: center;
              font-size: 0.6rem;
              .iconfont {
                margin-right: 0.25rem;
                font-size: 0.8rem;
              }
            }
          }
          .orderBtn {
            padding: 0.3rem 0;
            width: 40%;
            text-align: center;
            border-radius: 1rem;
            font-size: 0.6rem;
            box-sizing: border-box;
            margin-left: 0.75rem;
          }
          .greenBtn {
            border: 1px solid #4fc763;
            color: #4fc763;
          }
          .pinkBtn {
            border: 1px solid #4fc763;
            color: #4fc763;
          }
          .blackBtn {
            border: 1px solid #999;
            color: #666;
          }
        }
      }
      .serveTime {
        width: 100%;
        text-align: right;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px dashed #ebebeb;
        color: #666;
        font-size: 0.6rem;
      }
    }
  }
  .loadMore {
    text-align: center;
    padding: 0.75rem 0;
    font-size: 0.6rem;
    color: #999;
  }
  .techMask {
    padding: 0.75rem 4%;
    box-sizing: border-box;
    background-color: #f7f7f7;
    .goodsItem {
      width: 100%;
      margin-bottom: 0.5rem;
      display: flex;
      align-items: center;
      background-color: #fff;
      padding: 0.75rem 4%;
      border: 1px solid #4fc763;
      box-sizing: border-box;
      border-radius: 0.25rem;
      .goodsImg {
        width: 3.5rem;
        height: 3.5rem;
        overflow: hidden;
        border-radius: 50%;
        margin-right: 0.5rem;
        img {
          width: 100%;
        }
      }
      .goodsInfo {
        width: 0.5rem;
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 3.5rem;
        justify-content: space-between;
        .goodsName {
          width: 100%;
          font-size: 0.7rem;
          display: flex;
          font-weight: bold;
          align-items: center;
          .iconfont {
            font-size: 0.7rem;
            margin-left: 0.75rem;
            color: #4fc763;
          }
          .rateNum {
            font-size: 0.6rem;
            color: #4fc763;
            margin-left: 0.25rem;
          }
        }
        .goodsTip {
          font-size: 0.6rem;
          color: #666;
        }
        .regTag {
          display: flex;
          color: #666;
          font-size: 0.6rem;
          .regTagItem {
            margin-right: 0.75rem;
            display: flex;
            align-items: center;
            .iconfont {
              margin-right: 0.25rem;
              color: #4fc763;
            }
          }
        }
        .orderTime {
          font-size: 0.6rem;
          color: #666;
          display: flex;
        }
      }
    }
    .maskTitle {
      font-size: 0.8rem;
      font-weight: bold;
      margin-bottom: 0.5rem;
      text-align: center;
      margin-top: 1rem;
    }
    .noTech {
      text-align: center;
      color: #666;
      margin-top: 1rem;
      margin-bottom: 1rem;
    }
    .goodsList {
      box-sizing: border-box;
      border-radius: 0.25rem;
      max-height: 15rem;
      overflow-y: auto;
      margin-bottom: 0.75rem;

      .listItem {
        width: 100%;
        padding: 0.75rem 0;
        padding: 0.75rem;
        background-color: #fff;
        border: 1px solid #fff;
        margin-bottom: 0.75rem;
        // padding: 1rem 0;
        border-radius: 0.25rem;
        display: flex;
        box-sizing: border-box;
        .itemImg {
          width: 4.5rem;
          font-size: 0;
          overflow: hidden;
          border-radius: 0.25rem;
          margin-right: 0.75rem;
          position: relative;
          .typeTagWai {
            font-size: 0.6rem;
            height: 1.1rem;
            line-height: 1.3rem;
            position: absolute;
            top: -0.1rem;
            right: -2.1rem;
            background-color: #4fc763;
            width: 5rem;
            text-align: center;
            transform: rotate(45deg);
            color: white;
            .typeTag {
              transform: scale(0.8);
            }
          }
          img {
            width: 100%;
          }
        }
        .itemInfo {
          width: 0.5rem;
          flex: 1;
          height: 4.5rem;
          padding: 0.1rem 0;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .itemName {
            width: 100%;
            overflow: hidden;
            font-size: 0.7rem;
            height: 1rem;
            line-height: 1rem;
            white-space: nowrap;
            font-weight: bold;
            text-overflow: ellipsis;
            color: #333;
          }
          .itemTag {
            height: 1rem;
            line-height: 1rem;
            font-size: 0.6rem;
            color: #666;
            margin-top: 0.25rem;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .tagDes {
              background-color: #4fc763;
              color: #fff;
              font-size: 0.6rem;
              padding: 0 0.25rem;
              line-height: 1rem;
              border-radius: 0.1rem;
              box-sizing: border-box;
              display: flex;
              .iconfont {
                font-size: 0.6rem;
                margin-right: 0.25rem;
              }
            }
          }
          .itemDes {
            height: 1rem;
            line-height: 1rem;
            font-size: 0.6rem;
            color: #666;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 100%;
            // margin-top: 0.2rem;
            .showNum {
              display: flex;
              align-items: center;
              .iconfont {
                margin-right: 0.2rem;
              }
            }
          }
          .itemTagCont {
            width: 100%;
            height: 1.2rem;
            overflow: hidden;
            display: flex;
            // margin-top: 0.2rem;
            flex-wrap: wrap;
            .tags {
              font-size: 0.6rem;
              padding: 0.1rem 0.25rem;
              box-sizing: border-box;
              border-radius: 0.15rem;
              margin-right: 0.25rem;
              margin-bottom: 0.25rem;
              color: #4fc763;
              border: 1px solid #4fc763;
            }
          }
          .priceVal {
            width: 100%;
            // margin-top: 0.2rem;
            font-size: 0.6rem;
            display: flex;
            display: table-cell;
            .price {
              color: #4fc763;
            }
            .oldPrice {
              color: #666;
              text-decoration: line-through;
            }
          }
        }
      }
      .acticeGoods {
        border: 1px solid #4fc763;
        background-color: #daf7de;
      }
      .no_border {
        border-bottom: none;
      }
    }
  }
}
</style>
